<template>
  <div class="main" @touchmove.prevent @click.self="showCodeIs">
    <div class="main__code" v-if="!share">
      <div class="main__code__top">
        <div class="main__code__top__close iconfont" @click="showCodeIs">
          &#xe72a;
        </div>
        <div class="main__code__top__nav">
          <div class="main__code__top__nav__left active">
            <span class="iconfont">&#xe602;</span> 微信扫一扫
          </div>
          <div class="main__code__top__nav__right">
            <span class="iconfont">&#xe603;</span>手机号添加
          </div>
        </div>
        <div class="main__code__top__content">
          <div class="main__code__top__content__one">微信扫一扫</div>
          <div class="main__code__top__content__two">
            添加
            <span class="main__code__top__content__two__doctorName">{{
              userInfo.username
            }}</span>
            神医
          </div>
          <div class="main__code__top__content__three iconfont">
            &#xe8e0;
            <img :src="userInfo?.headImg" alt="" />
          </div>
          <div class="main__code__top__content__four">
            不包含我的微信或者手机号码
          </div>
          <div class="main__code__top__content__five">
            <u> 长按保存我的二维码图片 </u>
          </div>
        </div>
      </div>
      <div class="main__code__bottom">
        <div class="main__code__bottom__top">
          <div class="main__code__bottom__top__left iconfont">&#xe61f;</div>
          <div class="main__code__bottom__top__right">
            <div class="main__code__bottom__top__right__header">
              <div class="main__code__bottom__top__right__header__title">
                我的欢迎语
              </div>
              <div class="main__code__bottom__top__right__header__set">
                设置
              </div>
            </div>
            <div class="main__code__bottom__top__right__content">
              欢迎找我在线复诊，请及时上传实体医疗机构病历、认真填写主诉和问诊单，有助于我更好的了解您的病情。稍后我会为您在线开方，付款后由专业药房抓药，药材很快就可以送到。
            </div>
          </div>
        </div>
        <div class="main__code__bottom__mid">
          <div class="main__code__bottom__mid__left iconfont">&#xe658;</div>
          <div class="main__code__bottom__mid__mid">
            领取物料，加患者更方便哦
          </div>
          <div class="main__code__bottom__mid__right">去领取</div>
        </div>
        <div class="main__code__bottom__bottom">
          <button
            class="main__code__bottom__bottom__button"
            @click="
              () => {
                showShare = true;
                share = true;
              }
            "
          >
            分享我的名片
          </button>
        </div>
      </div>
    </div>
  </div>
  <van-share-sheet
    v-model:show="showShare"
    title="立即分享给好友"
    :options="options"
    :overlay="false"
    description="描述信息"
    @cancel="showCodeIs"
  />
</template>
<script>
import storage from "../../utils/storage";
export default {
  props: ["showCode"],
  data() {
    return {
      codeShow: this.showCode,
      showShare: false,
      share: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      userInfo: storage.getItem("userInfo"),
    };
  },
  methods: {
    showCodeIs() {
      this.$emit("changeCode");
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.352);
  z-index: 100;
  &__code {
    height: 682rem;
    width: 371rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f5f5f5;
    &__top {
      padding-top: 10rem;
      box-sizing: border-box;
      background-color: #fff;
      &__close {
        position: absolute;
        right: 6rem;
        top: 6rem;
        font-size: 16rem;
      }
      &__nav {
        display: flex;
        justify-content: center;
        & div {
          font-size: 21rem;
          color: #919191;
          padding-bottom: 10rem;
          margin: 15rem;
        }
        & .active {
          border-bottom: 2rem solid #6481da;
          color: #6481da;
        }
      }
      &__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14rem;
        & > div {
          margin: 5rem 0;
        }
        &__one {
          font-size: 18rem;
          font-weight: bold;
        }
        &__two {
          font-size: 17rem;
          & span {
            color: #6481da;
          }
        }
        &__three {
          width: 200rem;
          height: 200rem;
          font-size: 200rem;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          & img {
            width: 61rem;
            height: 61rem;
            position: absolute;
            border: 6rem solid #ffffff;
            box-shadow: 0 5rem 10rem #ffffff;
          }
        }
        &__five {
          color: #6481da;
          font-weight: 600;
          letter-spacing: 0.5rem;
        }
      }
    }
    &__bottom {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 14rem;
      padding: 5rem 20rem;
      margin-top: 15rem;
      background-color: #fff;
      &__top {
        display: flex;
        justify-content: start;
        margin: 20rem 0;
        &__left {
          width: 44rem;
          height: 44rem;
          font-size: 40rem;
          color: #24a9ff;
          border: 2rem solid #24a9ff;
        }
        &__right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0 0rem 0 10rem;
          &__header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10rem;
            &__title {
              font-weight: bold;
            }
            &__set {
              color: #24a9ff;
            }
          }
          &__content {
            border: 1rem solid #888888;
            color: #888888;
            padding: 10rem;
            box-sizing: border-box;
            border-radius: 10rem;
          }
        }
      }
      &__mid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rem;
        &__left {
          font-size: 25rem;
          color: #fdba1d;
        }
        &__mid {
          margin-left: -40rem;
          font-weight: bold;
        }
        &__right {
          color: #24a9ff;
        }
      }
      &__bottom {
        display: flex;
        justify-content: center;
        &__button {
          width: 280rem;
          height: 35rem;
          background-color: #838eb1;
          border-radius: 5rem;
          color: #f5f5f5;
        }
      }
    }
  }
  &__window {
    width: 375rem;
    height: 225rem;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: start;
    font-size: 14rem;
    padding: 0 20rem;
    box-sizing: border-box;
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 20%;
    }
    &__line {
      border-bottom: 1rem solid #000;
      margin-bottom: 10rem;
    }
    &__content {
      display: flex;
      flex-wrap: wrap;
      &__iconItems {
        width: 67rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rem;
        &__icon {
          font-size: 42rem;
        }
        &__text {
          color: #7f7f7f;
        }
      }
    }
  }
}
</style>
